<template>
  <div class="box">
    <myForm
      :formData="formData"
      :formConfig="formConfig"
      :formColumn="formColumn"
      :formRules="rules"
      ref="FF"
      class="form"
    ></myForm>
    <div class="content-box">
      <span>内容</span>
      <div class="content">
        <quill-editor content-type="html" :content="formData.content" :options="options" ref="quill" />
      </div>
    </div>
    <div class="file-box">
      <span> 附件</span>
      <Upload @onSuccess="handleSuccess" :fileList="formData.fileList" v-if="showData"></Upload>
      <!-- <UploadList :fileList="formData.fileList"></UploadList> -->
    </div>
    <div class="btn-box">
      <el-button type="primary" @click="submit()">确定</el-button>
      <el-button @click="close()">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, reactive } from 'vue'
import { addDataApi, getDataByIdApi } from '@/api/km' //api/后面不能大写Mgmt
import myForm from '@/components/UnForm/index.vue'
import Upload from '@/components/Upload.vue'
import { ElMessage } from 'element-plus'
import { useStore } from '@/pinia/index'
import { useRouter, useRoute } from 'vue-router'
const pinia = useStore()
const router = useRouter()
const route = useRoute()
let showData = ref(false)
const formConfig = reactive({ labelWidth: '120px', ref: 'dom' })
const formColumn = reactive([
  {
    label: '标题',
    type: 1,
    fild: 'title',
    rule: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    disabled: false,
    width: '100%'
  },
  {
    label: '分类',
    type: 2,
    fild: 'tag',
    rule: [{ required: true, message: '请输入分类', trigger: 'blur' }],
    multiple: true,
    option: [
      {
        label: '前端',
        value: '前端'
      },
      {
        label: 'VUE2',
        value: 'VUE2'
      },
      {
        label: 'VUE3',
        value: 'VUE3'
      },
      {
        label: 'HTML',
        value: 'HTML'
      },
      {
        label: 'JS',
        value: 'JS'
      },
      {
        label: 'CSS',
        value: 'CSS'
      },
      {
        label: '其他',
        value: '其他'
      },
      {
        label: 'node',
        value: 'node'
      }
    ],
    disabled: false,
    width: '100%'
  },
  {
    label: '描述',
    type: 3,
    fild: 'dept',
    rule: [{ required: true, message: '请输入描述', trigger: 'blur' }],
    width: '100%'
  }
])
const formData = reactive({
  title: '',
  tag: [],
  dept: '',
  fileList: [],
  content: ''
})
//添加表单验证
const rules = computed(() => {
  const obj = reactive({})
  formColumn.forEach((item) => {
    if (item.rule) {
      const key = item.fild
      const rule = item.rule
      obj[key] = rule
    }
  })
  return obj
})
const FF = ref('')
//文件上传成功
const handleSuccess = (res) => {
  formData.fileList = res
  // formData.fileList = JSON.parse(res)
}
//提交保存
const submit = async () => {
  const res = await FF.value.checkForm()
  if (res) {
    formData.content = quill.value.getHTML()
    let param = JSON.parse(JSON.stringify(formData))
    param.fileList = JSON.stringify(formData.fileList)
    param.tag = formData.tag.join(',')
    param.author = pinia.userInfo.name
    param.authorId = pinia.userInfo.id
    param.id = route.query.id || ''
    const data = await addDataApi(param)
    if (data.code === 200) {
      if (route.query.id) {
        ElMessage.success('修改成功')
      } else {
        ElMessage.success('添加成功')
      }
      router.push({ path: '/knowledge/index' })
    } else {
      ElMessage.error(data.msg)
    }
  }
}
//获取详情
const getDetail = async () => {
  const { data } = await getDataByIdApi({ id: route.query.id })
  if (data) {
    formData.title = data.title
    formData.tag = data.tag.split(',')
    formData.dept = data.dept
    formData.content = quill.value.setHTML(data.content)
    formData.fileList = data.fileList === '' ? [] : JSON.parse(data.fileList)
    showData.value = true
  }
}
let quill = ref(null)
let options = {
  placeholder: '请在这里输入',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
      ['blockquote', 'code-block'], // 引用，代码块
      [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
      [{ list: 'ordered' }, { list: 'bullet' }], // 列表
      [{ script: 'sub' }, { script: 'super' }], // 上下标
      [{ indent: '-1' }, { indent: '+1' }], // 缩进
      [{ direction: 'rtl' }], // 文本方向
      [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
      [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
      [{ font: [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体
      ['clean'] // 清除字体样式
    ]
  }
}

//取消
const close = () => {
  router.go(-1)
}
onMounted(() => {
  if (route.query.id) {
    getDetail()
  } else {
    showData.value = true
  }
})
</script>
<style scoped lang="scss">
.box {
  width: 70%;
  margin: 20px auto;
  .btn-box {
    margin-top: 20px;
    text-align: center;
  }
  .content-box {
    display: flex;
    width: 100%;
    height: 300px;
    > span {
      width: 120px;
      text-align: right;
      color: #606266;
      padding: 0 12px;
    }
    .content {
      flex: 1;
      height: 100%;
    }
  }
  .file-box {
    display: flex;
    > span {
      width: 120px;
      text-align: right;
      color: #606266;
      padding: 0 12px;
    }
  }
}
.myform {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  ::v-deep(.el-select) {
    width: 100%;
  }
}
</style>
